import { ExpertList } from '@/api/expert';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'taro-hooks';
import Tags from './Tags';

export default function ProfessionalDefault() {
  const { data: list } = useRequest(ExpertList);

  return (
    <>
      {list?.map((item) => (
        <View
          key={item.id}
          className=' flex p-4 bg-white rounded-lg mb-4'
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/professional/detail?id=${item.id}`,
            });
          }}
        >
          <Image
            className='w-[144px] h-[188px] rounded-lg bg-slate-200 mr-3'
            src={item.headimg}
            mode='aspectFill'
          />
          <View className='flex-1'>
            <Text className=' block text-[36px] text-black font-bold'>
              {item?.name}
            </Text>
            <View className='mt-2'>
              <Tags list={item.tags?.split(',')} />
            </View>
            {item.description && (
              <Text className='block text-xs mt-2'>{item.description}</Text>
            )}
          </View>
        </View>
      ))}
    </>
  );
}
